<template>
  <div>
        <el-table            
            :data="commenrList"
            style="width: 70%; margin-left:80px; font-size:20px">

           <el-table-column
                prop="commentCon"
                label="评论内容"
                width="300">
            </el-table-column>

             <el-table-column
                label="点赞"
                width="300">
               <template slot-scope="scope">
                        <img v-if="flag==false" src='@/assets/add.png'  @click="addLikes(scope.row)">
                        <img v-if="flag==true" src='@/assets/cancel.png'  @click="addLikes(scope.row)">
                        <!-- <img :src="flag== true ? require('@/assets/cancel.png'): require('@/assets/add.png')"  @click="addLikes(scope.row)"> -->
                        <!-- <img src="../../assets/cancel.png"> -->
                    <el-badge :value="scope.row.count" class="item"></el-badge>
                </template>
            </el-table-column>

        </el-table>
  </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
// import pic1 from '@/assets/add.png'
// import pic2 from '@/assets/cancel.png'
export default {
    data(){
        return {
            comList:{},
            flag:false,
        }

    },
    computed:{
        ...mapState('demo',['commenrList'])
    },
    methods:{
        ...mapActions('demo',['getComList']),
        async addLikes(row){
            var response = await this.ajax.getSubmit("/project/comments/findByCount",{commentId:row.commentId});
            
            if(response.data == "addOk"){
        
                this.flag=true;
                this.getComList();
            }
            if(response.data == "delOk"){
                this.flag=false;
                this.getComList();
            }
        }
    },
    created(){
        this.getComList();
    }

}
</script>

<style>

</style>